/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, TouchableOpacity, ScrollView, Image, StatusBar, SafeAreaView,
} from "react-native";
import Swiper from "react-native-swiper";
import { connect } from "react-redux"; // 引入connect函数

import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NetWorkUtil from "../utils/NetWorkUtil";
import NavigatorUtil from "../utils/NavigatorUtil";
import { getDeviceName } from "../utils/DeviceInfoUtil";
import * as recycleAction from "../actions/recycleAction"; // 导入action方法
import HolderImage from "../widget/common/HolderImage";
import Button from "../widget/common/NCButton";
import ImageButton from "../widget/common/ImageButton";
import HotPhoneItem from "../widget/listitem/HotPhoneItem";

class Recycle extends Component {
  componentWillMount() {
    const { props } = this;
    getDeviceName().then(deviceName => props.dispatch(recycleAction.getDeviceInfo(deviceName)));
    props.dispatch(recycleAction.getBanners());
    props.dispatch(recycleAction.getHotRecycleDeviceList());
  }

  renderImageRow = (banner, index) => {
    return banner ? (
      <HolderImage source={{ uri: NetWorkUtil.getFileUrl(banner.banner_src) }} style={styles.banner} />
    ) : null;
  };

  renderSwiper() {
    const { recycleReducer } = this.props;
    const { banners } = recycleReducer;
    return (
      <Swiper height={scale * 150} showsPagination={false} autoplay>
        {banners.map((banner, index) => (
          <TouchableOpacity onPress={() => {}} activeOpacity={1.0} key={String(index)}>
            <HolderImage
              key={String(index)}
              source={{ uri: NetWorkUtil.getFileUrl(banner.banner_src) }}
              style={styles.swiper}
              resizeMode="stretch"
            />
          </TouchableOpacity>
        ))}
      </Swiper>
    );
  }

  renderDesc() {
    return (
      <View style={styles.rowContainer}>
        <View style={styles.descItem}>
          <Image source={require("../img/ic_desc_tag.png")} style={styles.imgDescItem} />
          <Text style={styles.textDescItem}>系统安全保障</Text>
        </View>
        <View style={styles.descItem}>
          <Image source={require("../img/ic_desc_tag.png")} style={styles.imgDescItem} />
          <Text style={styles.textDescItem}>极致用户体验</Text>
        </View>
        <View style={styles.descItem}>
          <Image source={require("../img/ic_desc_tag.png")} style={styles.imgDescItem} />
          <Text style={styles.textDescItem}>24h极速到账</Text>
        </View>
      </View>
    );
  }

  handleRecycleNow() {
    const { recycleReducer } = this.props;
    const { deviceInfo } = recycleReducer;
    deviceInfo ? NavigatorUtil.goRecyclePriceInfo(deviceInfo) : NavigatorUtil.goRecycleDeviceModel();
  }

  renderCurVersion() {
    const { recycleReducer } = this.props;
    const { deviceInfo, deviceName } = recycleReducer;
    const deviceSource = deviceInfo
      ? { uri: NetWorkUtil.getFileUrl(deviceInfo.facility_src) }
      : require("../img/ic_phone.png");
    return (
      <View style={styles.deviceInfoContainer}>
        <View style={styles.deviceInfoSubContainer}>
          <HolderImage source={deviceSource} style={styles.imgCurDevice} resizeMode="cover" />
          <View>
            <Text style={styles.textDesc}>当前检测手机型号</Text>
            <View style={styles.row}>
              <Text style={styles.textDeviceName}>{deviceName}</Text>
              <Image source={require("../img/ic_arrow_right.png")} style={styles.icArrow} />
            </View>
            <View style={styles.row}>
              <Text style={styles.textDesc}>最高成交价</Text>
              <Text style={styles.textPrice}>{deviceInfo ? deviceInfo.recycle_max_price : "暂无估价"}</Text>
            </View>
          </View>
        </View>
        <Button
          buttonStyle={styles.button}
          textStyle={styles.buttonText}
          title="立即回收"
          onPress={() => this.handleRecycleNow()}
        />
      </View>
    );
  }

  renderRecycleFlow() {
    return (
      <View style={styles.recycleFlowConatiner}>
        <Text style={styles.subTitle}>回收流程</Text>
        <View style={styles.spaceBetween}>
          <ImageButton
            source={require("../img/ic_evaluate.png")}
            text="手机估价"
            style={styles.flex}
            imgHeight={scale * 32}
            imgWidth={scale * 32}
            itMargin={scale * 10}
          />
          <ImageButton
            source={require("../img/ic_placeorder.png")}
            text="提交订单"
            style={styles.flex}
            imgHeight={scale * 32}
            imgWidth={scale * 32}
            itMargin={scale * 10}
          />
          <ImageButton
            source={require("../img/ic_detection.png")}
            text="专业检测"
            style={styles.flex}
            imgHeight={scale * 32}
            imgWidth={scale * 32}
            itMargin={scale * 10}
          />
          <ImageButton
            source={require("../img/ic_collection.png")}
            text="极速收款"
            style={styles.flex}
            imgHeight={scale * 32}
            imgWidth={scale * 32}
            itMargin={scale * 10}
          />
        </View>
      </View>
    );
  }

  renderRecycleList() {
    const { recycleReducer } = this.props;
    const { hotRecycleList } = recycleReducer;
    return (
      <View style={styles.recycleListConatiner}>
        <Text style={styles.subTitle}>限时高价回收</Text>
        <View style={styles.hotListConatiner}>
          {hotRecycleList.map((item, index) => (
            <HotPhoneItem
              key={String(index)}
              title={item.facility_name}
              desc="最高回收价"
              price={item.recycle_max_price}
              source={{ uri: NetWorkUtil.getFileUrl(item.facility_src) }}
            />
          ))}
        </View>
      </View>
    );
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView style={styles.container}>
          {this.renderSwiper()}
          {this.renderDesc()}
          {this.renderCurVersion()}
          {this.renderRecycleFlow()}
          {this.renderRecycleList()}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  rowContainer: {
    marginTop: scale * 16,
    paddingHorizontal: scale * 16,
    flexDirection: "row",
    width: ScreenWidth,
    justifyContent: "space-between",
  },
  recycleFlowConatiner: {
    marginTop: scale * 32,
    width: ScreenWidth,
  },
  recycleListConatiner: {
    marginTop: scale * 32,
    width: ScreenWidth,
    marginBottom: 30 * scale,
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
  },
  spaceBetween: {
    paddingHorizontal: scale * 23,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  deviceInfoContainer: {
    backgroundColor: Color.white,
    elevation: 2,
    shadowOffset: { height: 1 },
    shadowColor: Color.black,
    shadowOpacity: 0.1,
    width: ScreenWidth - scale * 32,
    height: scale * 180,
    marginLeft: scale * 16,
    alignItems: "center",
    justifyContent: "center",
    marginTop: scale * 25,
  },
  deviceInfoSubContainer: {
    flexDirection: "row",
  },
  descItem: {
    flexDirection: "row",
    alignItems: "center",
  },
  imgCurDevice: {
    width: 70 * scale,
    height: 80 * scale,
    marginRight: 40 * scale,
  },
  textDesc: {
    color: Color.text_assist,
    fontSize: FontSize.SIZE_12,
  },
  textPrice: {
    color: Color.text_price,
    marginLeft: scale * 8,
    fontSize: FontSize.SIZE_24,
  },
  textDeviceName: {
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
    marginRight: 6 * scale,
    marginTop: 8 * scale,
    marginBottom: 8 * scale,
  },
  imgDescItem: {
    width: 16 * scale,
    height: 16 * scale,
  },
  textDescItem: {
    color: Color.text_desc,
    fontSize: FontSize.SIZE_12,
    marginLeft: scale * 5,
  },
  icArrow: {
    width: 20 * scale,
    height: 20 * scale,
  },
  swiper: {
    width: ScreenWidth,
    height: scale * 150,
    backgroundColor: "white",
  },
  description: {
    marginHorizontal: 16 * scale,
    marginVertical: 24 * scale,
    fontSize: 24 * scale,
    color: Color.text_title,
    fontWeight: "bold",
  },
  subTitle: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
    fontWeight: "bold",
    marginLeft: scale * 16,
    marginBottom: scale * 16,
  },
  buttonText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
  button: {
    height: 44 * scale,
    width: ScreenWidth - 64 * scale,
    marginTop: 20 * scale,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.bg_selected,
    borderWidth: 0,
  },
  hotListConatiner: {
    paddingHorizontal: scale * 8,
    flexDirection: "row",
    flexWrap: "wrap",
    marginBottom: scale * 30,
  },
});

const reducers = state => {
  return {
    recycleReducer: state.recycleReducer,
  };
};

export default connect(reducers)(Recycle);
